<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Functional Programming</title>
</head>

<body>

    <!-- Functional Programming 是Rx 最重要的观念之一，基本上只要学会FP 要上手Rx 就不难了 -->
    <!-- Functional Programming 是一种编程范式(programming paradigm)，就像OOP一样，就是一种写程式的方法论 -->

    <!-- 简单说Functional Programming 核心思想就是做运算处理 -->

    <!-- 如： -->
    <script>
        (5 + 3) - 1 * 3

        const add = (a, b) => a + b;
        const mul = (a, b) => a * b;
        const sub = (a, b) => a - b;

        sub(add(5, 6), mul(1, 3));

        //函数赋值
        var hello = function () { }

        // 函数当做参数传入
        fetch('www.baidu.com')
            .then(function (res) {
                // 匿名function,传入then
            })

        //函数能做返回值
        var a = function (a) {
            return function (b) {
                return a + b;
            };
            //可以传回一个function
        }

        //  取每个元素
        // es5前
        var arr = ["Jerry", "Anna"];

        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

        //es5后

        var arr = ["Jerry", "Anna"];
        arr.forEach(item => console.log(item));



        var newCourseList = [
            {
                "id": 511021,
                "title": "React for Beginners",
                "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
                "rating": 5
            },
            {
                "id": 511022,
                "title": "Vue2 for Beginners",
                "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
                "rating": 5
            },
            {
                "id": 511023,
                "title": "Angular2 for Beginners",
                "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
                "rating": 5
            },
            {
                "id": 511024,
                "title": "Webpack for Beginners",
                "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
                "rating": 4
            }
        ], idAndTitle = [];


        // forEach遍历数组
        newCourseList.forEach((course) => {
            idAndTitle.push({
                id: course.id,
                title: course.title
            })
        })

        //map重构
        Array.prototype.map = function (callback) {
            //声明一个空数组存放
            var result = [];

            this.forEach((ele, index) => {
                //压入空数组中
                result.push(callback(ele, index));
                //callback回调
            })
            return result;
        }

        var idAndTitle = newCourseList
            .map((course) => {
                return { id: course.id, title: course.title };
            });


        //filter、

        //forEach实现
        //过滤出rating值为5的元素
        var ratingIsFive = [];

        newCourseList.forEach((course) => {
            if (course.rating == 5) {
                ratingIsFive.push(course);
            }
        })

        // 用filter实现
        Array.prototype.filter = function (callback) {
            //声明
            var result = [];

            this.forEach((item, index) => {
                if (callback(item, index))
                    result.push(item);
            });

            return result;
        }

        var ratingIsFive = newCourseList
            .filter((course) => course.rating == 5);

        //这样的格式就是流式
        var ratingIsFive = newCourseList
            .filter((course) => course.rating == 5)
            .map(course => course.title);


        //处理二维数组
        var user = {
            id: 888,
            name: 'JerryHong',
            courseLists: [{
                "name": "My Courses",
                "courses": [{
                    "id": 511019,
                    "title": "React for Beginners",
                    "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
                    "tags": [{ id: 1, name: "JavaScript" }],
                    "rating": 5
                }, {
                    "id": 511020,
                    "title": "Front-End automat workflow",
                    "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
                    "tags": [{ "id": 2, "name": "gulp" }, { "id": 3, "name": "webpack" }],
                    "rating": 4
                }]
            }, {
                "name": "New Release",
                "courses": [{
                    "id": 511022,
                    "title": "Vue2 for Beginners",
                    "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
                    "tags": [{ id: 1, name: "JavaScript" }],
                    "rating": 5
                }, {
                    "id": 511023,
                    "title": "Angular2 for Beginners",
                    "coverPng": "https://res.cloudinary.com/dohtkyi84/image/upload/v1481226146/react-cover.png",
                    "tags": [{ id: 1, name: "JavaScript" }],
                    "rating": 4
                }]
            }]
        };

        var allCourseIds = [];

        //两次forEach遍历
        user.courseLists.forEach(list => {
            list.courses.filter(item => item.rating == 5)
                .forEach(item => {
                    allCourseIds.push(item)
                })
        })

        //封装concatAll方法
        Array.prototype.concatAll = function () {
            var result = [];

            //用apply完成
            this.forEach((array) => {
                result.push.apply(result, array);
            })


            // 用兩個 forEach 完成
            // this.forEach((array) => {
            //   array.forEach(item => {
            //     result.push(item)
            //   })
            // });

            // 用 ES6 spread 完成
            // this.forEach((array) => {
            //   result.push(...array);
            // })

            return result;
        }


        var courseLists = [{
            "name": "My Courses",
            "courses": [{
                "id": 511019,
                "title": "React for Beginners",
                "covers": [{
                    width: 150,
                    height: 200,
                    url: "http://placeimg.com/150/200/tech"
                }, {
                    width: 200,
                    height: 200,
                    url: "http://placeimg.com/200/200/tech"
                }, {
                    width: 300,
                    height: 200,
                    url: "http://placeimg.com/300/200/tech"
                }],
                "tags": [{
                    id: 1,
                    name: "JavaScript"
                }],
                "rating": 5
            }, {
                "id": 511020,
                "title": "Front-End automat workflow",
                "covers": [{
                    width: 150,
                    height: 200,
                    url: "http://placeimg.com/150/200/arch"
                }, {
                    width: 200,
                    height: 200,
                    url: "http://placeimg.com/200/200/arch"
                }, {
                    width: 300,
                    height: 200,
                    url: "http://placeimg.com/300/200/arch"
                }],
                "tags": [{
                    "id": 2,
                    "name": "gulp"
                }, {
                    "id": 3,
                    "name": "webpack"
                }],
                "rating": 5
            }]
        }, {
            "name": "New Release",
            "courses": [{
                "id": 511022,
                "title": "Vue2 for Beginners",
                "covers": [{
                    width: 150,
                    height: 200,
                    url: "http://placeimg.com/150/200/nature"
                }, {
                    width: 200,
                    height: 200,
                    url: "http://placeimg.com/200/200/nature"
                }, {
                    width: 300,
                    height: 200,
                    url: "http://placeimg.com/300/200/nature"
                }],
                "tags": [{
                    id: 1,
                    name: "JavaScript"
                }],
                "rating": 5
            }, {
                "id": 511023,
                "title": "Angular2 for Beginners",
                "covers": [{
                    width: 150,
                    height: 200,
                    url: "http://placeimg.com/150/200/people"
                }, {
                    width: 200,
                    height: 200,
                    url: "http://placeimg.com/200/200/people"
                }, {
                    width: 300,
                    height: 200,
                    url: "http://placeimg.com/300/200/people"
                }],
                "tags": [{
                    id: 1,
                    name: "JavaScript"
                }],
                "rating": 5
            }]
        }];

        Array.prototype.concatAll = function(){
            var result = [];

            this.forEach(item=>{
                result.push(...item);
            })
            return result;
        }

        var result = courseLists
                    .map(list =>list.courses
                        .map(course=>course.covers
                            .filter(cover=>cover.width ==150)
                            .map(item=>({
                                id: course.id,
                                title: course.title,
                                cover: item.url
                            })
                            
                        )
                    ).concatAll()

                    ).concatAll()
            console.log(result);    
    </script>


</body>

</html>